<!DOCTYPE HTML>
<html>

<head>
    <title>Agora Open Duo</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

<body class="d-flex align-items-center">
    <div class="container text-center middle-box login card">
        <div>
            <img id="logo" class="mb-3" src="../../assets/images/logo.png" alt="Logo">
        </div>
        <h3>Agora Open Duo <span class="version">v1.0.0</span></h3>
        <p>Powering Real-Time Communications</p>
        
        <form action="meeting.html" method="GET">
            <div class="form-group row">
                <input id="account-name" type="text" class="form-control" placeholder="Enter your account here">
                <div class="invalid-feedback">
                    Valid account should be a non-empty numeric value.
                </div>
            </div>
            <div class="form-group row">
                <button class="btn btn-warning join-button btn-block btn-raised" id="join-meeting">
                    <span class="fa fa-sign-in">Join</span>
                </button>
            </div>
        </form>
        
        <!-- Footer -->
        <footer id="footer" class="mb-3">
            <small>
                <p>© Copyright Agora.io ICP证xxx号</p>
            </small>
        </footer>
    </div>

</body>

</html>